<template>
  <view class="grid-body">
    <uni-grid :column="4" :showBorder="false" @change="changeGrid">
      <uni-grid-item v-for="(item, index) in gridItems" :key="index">
        <view class="grid-item-box">
          <uni-icons :type="item.icon" size="30"></uni-icons>
          <text class="text">{{ item.text }}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script>
export default {
  props: {
    gridItems: {
      type: Array,
      required: true
    }
  },
  methods: {
    changeGrid(e) {
      this.$emit('changeGrid', e);
    }
  }
};
</script>

<style scoped lang="scss">
.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}
</style>
